<template>
  <div
    v-infinite-scroll="getMore"
    class="main"
    :infinite-scroll-disabled="disabledScroll"
    :infinite-scroll-immediate="false"
  >
    <el-backtop target=".main"></el-backtop>
    <Header />
    <div class="index">
      <Banner :banner-list="bannerList" />
      <NewsList :list="list" />
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from '@/components/public/header/index'
import Footer from '@/components/public/footer/index'
import NewsList from '@/components/public/newsList'
import Banner from '@/components/index/Banner'
const limit = 10
export default {
  name: 'Index',
  layout: 'blank',
  components: { Header, Footer, Banner, NewsList },
  data() {
    return {
      page: 1,
      disabledScroll: false
    }
  },
  async asyncData({ app }) {
    let bannerList = []
    let list = []
    const { status: statusBanner, data: dataBanner } = await app.$axios.get(
      `/public/banner`
    )
    if (statusBanner === 200 && dataBanner.code === 1) {
      bannerList = dataBanner.data
    }
    const { status: statusNews, data: dataNews } = await app.$axios.get(
      `/public/news`,
      { params: { limit, page: 1 } }
    )
    if (statusNews === 200) {
      if (dataNews.code === 1) {
        list = dataNews.data
      }
    }
    return { bannerList, list }
  },
  methods: {
    async getMore() {
      const { status, data } = await this.$axios.get('/public/news', {
        params: {
          limit,
          page: ++this.page
        }
      })
      if (status === 200) {
        if (data.code === 1) {
          this.list.push(...data.data)
        } else if (data.code === -1) {
          this.$message({
            message: data.msg,
            type: 'error'
          })
          this.disabledScroll = true
          this.page--
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100vh;
}
.index {
  margin: 0 auto;
  width: $--typeArea;
}
.newsList {
  margin: 10px 0;
}
</style>
